<template>
	<div>
		<header>
			<van-nav-bar fixed title="收货地址列表" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
		</header>
		<section>
			<div>
				<van-address-list v-model="chosenAddressId" :list="list" @add="onAdd" @edit="onEdit"></van-address-list>
				<p class="iconfont icon-wpicon-shangjiantou" v-if="scrollY" @click="backTop"></p>
			</div>

			<van-button type="info" @click="sure">确定</van-button>
		</section>
		<footer></footer>
	</div>
</template>

<script>
	import * as api from '../api/getProlist'
	import Vue from "vue";
	import {
		Dialog
	} from "vant";

	// 全局注册
	Vue.use(Dialog);
	import axios from "axios";
	export default {
		name: "AddressPlace",
		data() {
			return {
				chosenAddressId: "1",
				list: [],
				scrollY: ''
			};
		},
		methods: {
			// 点击回到顶部方法，加计时器是为了过渡顺滑
			backTop() {
				const that = this
				let timer = setInterval(() => {
					let ispeed = Math.floor(-that.scrollTop / 5)
					document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
					if (that.scrollTop === 0) {
						clearInterval(timer)
					}
				}, 16)
			},
			// 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
			scrollToTop() {
				const that = this
				let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
				that.scrollTop = scrollTop
				if (that.scrollTop > 100) {
					that.scrollY = true
				} else {
					that.scrollY = false
				}
			},
			onAdd() {
				// this.$toast("新增地址");
				this.$router.push("/newaddress");
			},

			onEdit(item, index) {
				console.log(item.id);
				this.$router.push(`/newaddress?id=${item.id}`);
			},

			onClickLeft() {
				this.$router.go(-1);
			},
			onClickRight() {
				this.$toast("按钮");
			},
			sure() {
				this.$router.go(-1);
				localStorage.setItem("chosenAddressId", this.chosenAddressId);
			}
		},
		mounted() {
			window.addEventListener('scroll', this.scrollToTop)
			api.addressList({
					page: 1
				})
				.then(data => {
					for (let i = 0; i < data.data.addresses.length; i++) {
						let addressStr = data.data.addresses[i];
						let obj = {
							id: addressStr._id,
							name: addressStr.receiver,
							tel: addressStr.mobile,
							address: addressStr.address,
							regions: addressStr.regions,
							isDefault: addressStr.isDefault
						};
						this.list.push(obj);
					}
				});
		},
		destroyed() {
			window.removeEventListener('scroll', this.scrollToTop)
		},
	};
</script>

<style scoped="">
	.icon-wpicon-shangjiantou {
		font-size: 20px;
		position: fixed;
		bottom: 60px;
		right: 30px;
		color: #fff;
		text-align: center;
		line-height: 30px;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background: #666;
		opacity: 0.7;
	}

	p,
	span,
	li,
	ul,
	h1,
	img,
	a {
		margin: 0;
		padding: 0;
		color: #fff;
		font-size: 16px;
		font-weight: 500;
	}

	body {
		height: 100%;
		display: flex;
	}

	.van-address-list {
		margin-top: 46px;
	}

	.van-address-list__add {
		width: 185px;
	}

	.van-button--info {
		position: fixed;
		bottom: 0;
		right: 0;
		width: 185px;
		height: 50px;
		background: #fcabb4;
		border: 1px solid #fcabb4;
	}

	.van-button--danger {
		background: #d4616e;
		border: 1px solid #d4616e;
	}

	.van-nav-bar {
		background: #d4616e;
	}

	.van-button--danger span {
		color: #fff;
	}

	.van-nav-bar__title {
		color: #fff;
		font-size: 14px
	}

	.van-icon-arrow-left:before {
		color: #fff;
		font-size: 14px;
		line-height: 46px;
	}
</style>
